{{#conditional-loading-spinner condition=isLoading}}
  {{#if emptyTopics}}
    <span class="no-topics-found">{{html-safe (i18n "docs.no_topics")}}</span>
  {{else}}
    <div class="docs-browse">
      {{#if site.mobileView}}
        {{#unless selectedTopic}}
          {{d-button class="docs-expander" icon=(if expandedFilters "angle-up" "angle-down") action=(action "toggleFilters") label="docs.filter_button"}}
        {{/unless}}
      {{/if}}

      <div class="docs-filters">
        {{#if expandedFilters}}
          {{#if canFilterSolved}}
            <div class="docs-items docs-solved">
              <label class="checkbox-label docs-item">
                {{input
                  type="checkbox"
                  checked=(readonly filterSolved)
                  change=(action "onChangeFilterSolved" value="target.checked")
                }}
                {{i18n "docs.filter_solved"}}
              </label>
            </div>
          {{/if}}

          {{#if categories}}
            <div class="docs-items docs-categories">
              <section class="item-controls">
                <h3>{{i18n "docs.categories"}}</h3>
                <div class="item-controls-buttons">
                  {{d-button class=(if (eq categorySort.type "alpha") "categories-alphabet active" "categories-alphabet") icon=categorySortAlphaIcon action=toggleCategorySort actionParam="alpha"}}
                  {{d-button class=(if (eq categorySort.type "numeric") "categories-amount active" "categories-amount") icon=categorySortNumericIcon action=toggleCategorySort actionParam="numeric"}}
                </div>
              </section>
              {{#if showCategoryFilter}}
                {{input
                  value=categoryFilter
                  class="filter"
                  placeholderKey="docs.categories_filter_placeholder"
                }}
              {{/if}}
              <ul>
                {{#each sortedCategories as |category|}}
                  <li>
                    {{docs-category
                      category=category
                      selectCategory=(action "updateSelectedCategories" category)
                    }}
                  </li>
                {{/each}}
              </ul>
            </div>
          {{/if}}

          {{#if (and tags shouldShowTags)}}
            <div class="docs-items docs-tags">
              <section class="item-controls">
                <h3>{{i18n "docs.tags"}}</h3>
                <div class="item-controls-buttons">
                  {{d-button class=(if (eq tagSort.type "alpha") "tags-alphabet active" "tags-alphabet") icon=tagSortAlphaIcon action=toggleTagSort actionParam="alpha"}}
                  {{d-button class=(if (eq tagSort.type "numeric") "tags-amount active" "tags-amount") icon=tagSortNumericIcon action=toggleTagSort actionParam="numeric"}}
                </div>
              </section>
              {{#if showTagFilter}}
                {{input
                  value=tagFilter
                  class="filter"
                  placeholderKey="docs.tags_filter_placeholder"
                }}
              {{/if}}
              <ul>
                {{#each sortedTags as |tag|}}
                  <li>
                    {{docs-tag
                      tag=tag
                      selectTag=(action "updateSelectedTags" tag)
                    }}
                  </li>
                {{/each}}
              </ul>
            </div>
          {{/if}}
        {{/if}}
      </div>

      {{#if selectedTopic}}
        {{#conditional-loading-spinner condition=isTopicLoading}}
          {{docs-topic topic=topic return=(action "returnToList")}}
        {{/conditional-loading-spinner}}
      {{else}}
        <div class="docs-results">
          {{#if isSearchingOrFiltered}}
            {{#if emptyResults}}
              <div class="result-count no-result">
                {{i18n "search.no_results"}}
              </div>
              {{plugin-outlet name="after-docs-empty-results"}}
            {{else}}
              <div class="result-count">
                {{i18n "docs.search.results" count=topicCount}}
              </div>
            {{/if}}
          {{/if}}

          {{#unless emptyResults}}
            {{docs-topic-list
              topics=topics
              ascending=ascending
              order=orderColumn
              sortBy=(action "sortBy")
              selectTopic=(action "setSelectedTopic")
              loadMore=(action "loadMore")
              loading=isLoadingMore
            }}
          {{/unless}}
        </div>
      {{/if}}
    </div>
  {{/if}}
{{/conditional-loading-spinner}}
